<template>
  <div class="page">
    <div class="topPic">
      <img src="../../assets/79-1910291126417.jpg" alt />
    </div>

    <div class="topWord">
      <div class="topTit">
        <img :src="'http://localhost:8010/getImage?name='+obj.user.avataurl" alt class="yuanxingtu" />
        <div class="titleA">
          <div class="a">
            <p>{{obj.article.title}}</p>
          </div>
          <p class="b">
            <span class="name">
              <strong>作者:&ensp;</strong>
              {{obj.user.nickname}}
            </span>
            <i>LV.{{obj.user.level}}</i>
            <span class="c">
              <span>{{obj.date}}</span>
              &emsp;
              <span>阅读 {{obj.article.seetimes}}</span>
            </span>
          </p>
        </div>
        <div class="titleB">
          <div class="box">
            <img src="@/assets/点赞no.svg" @click="good(true)" v-if="!isgood" alt />
            <img src="@/assets/点赞.svg" @click="good(false)" v-else alt />
            <div style="text-align:center;">点赞·{{obj.article.goodtimes}}</div>
          </div>
          <div class="box">
            <img src="@/assets/收藏no.svg" @click="submitshoucang(true)" v-if="!isshoucang" alt />
            <img src="@/assets/收藏.svg" @click="submitshoucang(false)" v-else alt />
            <div style="text-align:center;">收藏·{{obj.article.startimes}}</div>
          </div>
        </div>
        <div style="clear:both;"></div>
      </div>
      <div style="clear:both;"></div>
    </div>
    <div class="article">
      <div id="editor"></div>
    </div>
    <div class="liner">到此结束</div>
    <div class="ibox">
      <jubao :nickname="obj.user.nickname" :uid="obj.user.id"
      outtype="用户信息不合法"
      >
        <img src="@/assets/jinggao.svg" alt />
      </jubao>
      <img src="@/assets/xiangshang.svg" @click="xiangshang(true)" alt />
    </div>
    <div style="clear:both;"></div>
    <div class="comments">
      <comment v-for="(item,index) in list" :key="index" :commentObj="item" :ind="index+1"></comment>
    </div>
    <div class="common">
      <div class="a">评论攻略:</div>
      <el-input
        class="i"
        v-model="thiscomment"
        :rows="3"
        type="textarea"
        placeholder="最多可以评论86个字..."
      ></el-input>
      <el-button
        @click="submit_comment"
        type="primary"
        size="mini"
        style="float:right;margin:8px 0;"
      >发表回复</el-button>
      <div style="clear:both;"></div>
    </div>
  </div>
</template>

<script>
import comment from "@/components/strategy/comment";
import jubao from "@/components/strategy/jubao";
export default {
  props: {
    aid: ""
  },
  components: { comment, jubao },
  data() {
    return {
      isgood: false,
      isshoucang: false,
      thiscomment: "",
      list: [], //评论列表
      artid: 1,
      editor: null,
      obj: {
        user: {
          nickname: "123s"
        },
        article: {
          createdate: ""
        }
      }
    };
  },
  mounted() {
    if (process.client) {
      const ClassicEditor = require("@ckeditor/ckeditor5-build-classic");
      require("@ckeditor/ckeditor5-build-classic/build/translations/zh-cn");
      // ClassicEditor.instances[]
      ClassicEditor.create(document.querySelector("#editor"), {
        language: "zh-cn",
        removePlugins: ["MediaEmbed"],
        toolbar: [],
        ckfinder: {
          uploadUrl: "http://localhost:8010/upload"
        }
      })
        .then(editor => {
          editor.isReadOnly = true; //将编辑器设为只读
          (editor.removePlugins = "toolbar"), (this.editor = editor);
          // this.editor.setData(
          //   // this.$store.state.commons.articleItem.article.content
          // );
          // window.console.log('id',this.$store.state.commons.articleItem.article.id);
          this.$axios
            .get(
              "/api2/article/selectOne?id=" +
                this.$store.state.commons.articleId
            )
            .then(res => {
              this.obj = res.data;
              this.editor.setData(this.obj.article.content);
              this.$axios
                .get(
                  "/api2/comment/list/" + this.$store.state.commons.articleId
                )
                .then(res => {
                  let data = res.data;
                  this.list = data.list;
                  this.$axios
                    .get(
                      "/api2/article/look?artId=" +
                        this.$store.state.commons.articleId +
                        "&token=" +
                        this.$store.state.user.userInfo.token
                    )
                    .then(res => {
                      window.console.log('res',res);
                      
                      if (res.data.em.shoucang == 1) {
                        this.isshoucang = true;
                      }else{
                        this.isshoucang = false;
                      }
                      if (res.data.em.dianzan == 1) {
                        this.isgood = true;
                      }else{
                        this.isgood = false;
                      }
                    });
                });
            });
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  methods: {
    good(value) {
      let token = this.$store.state.user.userInfo.token;
      if (token == "") {
        this.$message.error("你还未登录哦！");
        this.$router.push("/user/login");
        return;
      }
      if (value == true) {
        this.$axios.get(
          "/api2/article/dianzan?artId=" +
            this.$store.state.commons.articleId +
            "&token=" +
            this.$store.state.user.userInfo.token
        );
        this.obj.article.goodtimes++;
      } else {
        this.$axios.get(
          "/api2/article/quxiaodianzan?artId=" +
            this.$store.state.commons.articleId +
            "&token=" +
            this.$store.state.user.userInfo.token
        );
        this.obj.article.goodtimes--;
      }
      this.isgood = value;
    },
    xiangshang() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    submitshoucang(value) {
      let token = this.$store.state.user.userInfo.token;
      if (token == "") {
        this.$message.error("你还未登录哦！");
        this.$router.push("/user/login");
        return;
      }
      if (value == true) {
        this.$axios.get(
          "/api2/article/shoucang?artId=" +
            this.$store.state.commons.articleId +
            "&token=" +
            this.$store.state.user.userInfo.token
        );
        this.obj.article.startimes++;
      } else {
        this.$axios.get(
          "/api2/article/quxiaoshoucang?artId=" +
            this.$store.state.commons.articleId +
            "&token=" +
            this.$store.state.user.userInfo.token
        );
        this.obj.article.startimes--;
      }
      this.isshoucang = value;
    },
    submit_comment() {
      let token = this.$store.state.user.userInfo.token;
      if (token == "") {
        this.$message.error("你还未登录哦！");
        this.$router.push("/user/login");
        return;
      }
      if (this.content == "") {
        return;
      }
      window.console.log("comment", this.thiscomment);
      this.$axios
        .post(
          "/api2/comment/comment/" + this.$store.state.user.userInfo.token,
          {
            content: this.thiscomment,
            artId: this.$store.state.commons.articleId
          }
        )
        .then(res => {
          if (res.data.type == "SUCCESS") {
            this.$message.success("评论成功");
            this.$axios
              .get("/api2/comment/list/" + this.$store.state.commons.articleId)
              .then(res => {
                let data = res.data;
                this.list = data.list;
              });
          }
        });
    }
  }
};
</script>
<style>
@import url(../../assets/css/gonglve.css);
</style>
<style lang="less" scoped>
.ibox {
  width: 950px;
  margin: 0 auto;
  z-index: 9999;
  background: white;
  img {
    // border: 1px solid darkcyan;
    float: right;
    margin-right: 10px;
    padding: 3px;
    &:hover {
      background: darkgrey;
      border-radius: 10px;
      cursor: pointer;
    }
  }
}
/deep/a {
  color: black;
}
.page {
  background: white;
  // width: 1500px;
  // margin: 0 auto;
  .liner {
    width: 950px;
    margin: 0 auto;
    border-top: lightblue solid 2px;
    // background: lightblue;
    text-align: center;
  }
  .comments {
    width: 950px;
    margin: 0 auto;
  }
  .common {
    width: 930px;
    margin: 10px auto;
    background: white;
    padding: 20px;
    .a {
      margin: 10px 0;
      color: #27c18f;
      font-weight: 800;
    }
    .i {
      border: lightblue 2px solid;
    }
  }
}
.topWord {
  position: relative;
  /* float: left; */
  width: 1000px;
  height: 200px;
  background: white;
  margin: 0 auto;
  margin-top: -100px;
  border-radius: 30px;
  box-shadow: 0px 0px 25px #333333;
  .titleA {
    float: left;
    width: 550px;

    .a {
      font-size: 26px;
      font-weight: bold;
      line-height: 42px;
      width: 100%;
      padding-bottom: 10px;
    }
    .b {
      margin: 2px;
      .name {
        float: left;
        font-size: 14px;
        padding-right: 10px;
        line-height: 28px;
      }
      i {
        background: #ffce37;
        padding: 0 8px;
        border-radius: 4px;
        color: #fff;
        font-style: normal;
        font-size: 12px;
      }
      .c {
        float: right;
        // margin-left: 50px;
        font-weight: normal;
      }
    }
  }
  .titleB {
    float: left;
    border-left: thistle solid 1px;
    height: 142px;
    margin: 30px;
    width: 200px;
    .box {
      display: inline-block;
      width: 80px;
      margin-top: 50px;
      margin-left: 15px;
      img {
        display: block;
        width: 32px;
        margin: 0 auto;
      }
    }
  }
}
.yuanxingtu {
  height: 142px;
  width: 142px;
  margin: 20px;
  object-fit: cover;
  border-radius: 500px;
  float: left;
}
.article {
  margin-top: 120px;
  padding-bottom: 30px;
  // height: 1500px;
  width: 100%;

  // background: blanchedalmond;
}
/deep/.ck-content {
  min-height: 50vh;
}

/deep/div.ck.ck-editor__main > div {
  border: none !important;
  width: 50% !important;
  margin: 20px auto;
  background: rgb(248, 248, 248);
}
/deep/div.ck.ck-sticky-panel__content > div {
  display: none;
}

/deep/.ck a {
  background: rgb(255, 187, 187);
  border-radius: 3px;
  padding: 1px;
  text-decoration: none;
}
</style>